<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts-gl</title>
    <style>
        * {
            font-family: "微软雅黑";
        }

        #time, #thr3dbar, #laydata {
            position: absolute;
            top: 0px;
        }

        body {
            height: 850px;
        }

        #time {
            height: 100%;
            left: 0%;
            z-index: 10;
        }

        #thr3dbar {
            height: 100%;
            width: 100%;
        }

        #laydata {
            text-align: center;
            border: 1px solid green;
            height: 20px;
            top: 10px;
            left: 20px;
        }
    </style>


</head>
<body>
<div id="time">
    <input type="text" id="laydata" placeholder="2017-01-01 00:00:00"></input>
    <table>

    </table>
</div>
<div id="thr3dbar"></div>
</body>
<script src="../../ref/jquery-3.2.1.min.js"></script>
<script src="../../ref/echarts.min.js"></script>
<script src="../../ref/echarts-gl.min.js"></script>
<script src="../../ref/laydate/laydate.js" charset="utf-8"></script>
<script>
    //
    var doneTime = getBeforeDate(1);
    function addLaydata(id) {
        laydate.render({
            elem: id
            , type: 'date',
            done: function (value, date, endDate) {
                ajax(value);
            }
        });

    }

    addLaydata('#laydata');

    //获取当前日期
    function getBeforeDate(n) {
        var n = n;
        var d = new Date();
        var year = d.getFullYear();
        var mon = d.getMonth() + 1;
        var day = d.getDate();
        if (day <= n) {
            if (mon > 1) {
                mon = mon - 1;
            }
            else {
                year = year - 1;
                mon = 12;
            }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
    }

    ajax(doneTime);

    function ajax(doneTime) {
        var TimeDefault = getBeforeDate(1);
        $("#laydata").attr("placeholder", TimeDefault);
        var doneTime = doneTime || '';
        var cityName = [];
        var data = [];
        var newData = [];
        if (doneTime) {
            $.get('/hbtserver/aqi/city/day?day=' + doneTime + '', function (res) {
                var airTypes = ['aqi', 'pm25', 'pm10', 'so2', 'no2', 'co', 'o3'];
                var airSum = 0;
                var airSums = [];
                for (var i in res) {
                    cityName.push(res[i].name);
                }
                for (var i = 0; i < airTypes.length; i++) {
                    for (var j = 0; j < cityName.length; j++) {
                        //console.log(i);
                        //console.log(j);
                        //console.log(res[j][airTypes[i]]);
                        data.push(i);
                        data.push(cityName[j]);
                        var nvalue = 0;
                        if (i == 0) {
                            nvalue = res[j][airTypes[i]] / 500;
                        }
                        if (i == 1) {
                            nvalue = res[j][airTypes[i]] / 500;
                        }
                        if (i == 2) {
                            nvalue = res[j][airTypes[i]] / 600;
                        }
                        if (i == 3) {
                            nvalue = res[j][airTypes[i]] / 800;
                        }
                        if (i == 4) {
                            nvalue = res[j][airTypes[i]] / 300;
                        }
                        if (i == 5) {
                            nvalue = res[j][airTypes[i]] / 60;
                        }
                        if (i == 6) {
                            nvalue = res[j][airTypes[i]] / 800;
                        }
                        if (nvalue > 1.0) nvalue = 1.0;
                        data.push(nvalue);
//					console.log((res[j][airTypes[i]]/airSums[i]).toFixed(4));

                        //data.push(res[j][airTypes[i]]);
                    }
                }
                for (var i = 0, len = data.length; i < len; i += 3) {
                    newData.push(data.slice(i, i + 3));
                }
                setOption(cityName, newData);
            })
        } else {

        }
    }

    var mapChart = echarts.init(document.getElementById('thr3dbar'));

    function setOption(cityName, newData) {
        mapChart.clear();
        mapChart.setOption(getData(cityName, newData), true);
        $(window).resize(function () {
            mapChart.resize();
        });
    }

    function getData(cityName, newData) {
        // mapChart的配置
        var citys = cityName;
        var indexDatas = ['AQI', 'PM2.5', 'PM10', 'SO2', 'NO2', 'CO', 'O3'];
        var data = newData;
        var option = {
            title: {
                text: '空气质量城市间日对比3D柱形图',
                x: 'center',
                y: 'top',
                backgroundColor: 'rgba(0,0,0,0)',
                borderColor: '#ccc',
                borderWidth: 0,
                padding: 50,
                itemGap: 10,
                textStyle: {
                    fontSize: 20,
                    fontWeight: 'bolder',
                    color: '#333'
                }
            },

            tooltip: {
                trigger: 'item',
                formatter: name,
                formatter: function aa(params) {
                    var texts = "";
                    if (params.data.value[1] == 0) {
                        texts += params.data.value[0] + "<br>";
                        //texts +="y: "+params.data.value[1]+ "<br>";
                        texts += "AQI: " + getResult(params.data.value[2] * 500) + "<br>";
                    }
                    if (params.data.value[1] == 1) {
                        texts += params.data.value[0] + "<br>";
                        //texts +="y: "+params.data.value[1]+ "<br>";
                        texts += "PM2.5: " + getResult(params.data.value[2] * 500) + "<br>";
                    }
                    if (params.data.value[1] == 2) {
                        texts += params.data.value[0] + "<br>";
                        //texts +="y: "+params.data.value[1]+ "<br>";
                        texts += "PM10: " + getResult(params.data.value[2] * 600) + "<br>";
                    }
                    if (params.data.value[1] == 3) {
                        texts += params.data.value[0] + "<br>";
                        //texts +="y: "+params.data.value[1]+ "<br>";
                        texts += "SO2: " + getResult(params.data.value[2] * 800) + "<br>";
                    }
                    if (params.data.value[1] == 4) {
                        texts += params.data.value[0] + "<br>";
                        //texts +="y: "+params.data.value[1]+ "<br>";
                        texts += "NO2: " + getResult(params.data.value[2] * 300) + "<br>";
                    }
                    if (params.data.value[1] == 5) {
                        texts += params.data.value[0] + "<br>";
                        //texts +="y: "+params.data.value[1]+ "<br>";
                        texts += "CO: " + getResult(params.data.value[2] * 60) + "<br>";
                    }
                    if (params.data.value[1] == 6) {
                        texts += params.data.value[0] + "<br>";
                        //texts +="y: "+params.data.value[1]+ "<br>";
                        texts += "O3: " + getResult(params.data.value[2] * 800) + "<br>";
                    }
                    return texts;
                }
            },
            visualMap: {
                max: 2,
                inRange: {
                    color: ['rgb(0,228,0)', 'rgb(255,255,0)', 'rgb(255,126,0)', 'rgb(255,0,0)', 'rgb(153,0,76)', 'rgb(126,0,35)']
                },
                x: 'left',
                y: 'center'
            },
            xAxis3D: {
                type: 'category',
                name: '城市',
                data: citys,
                axisLabel: {
                    interval: 0
                }
            },
            yAxis3D: {
                type: 'category',
                name: '指标',
                data: indexDatas
            },
            zAxis3D: {
                type: 'value',
                name: '值',
            },
            grid3D: {
                viewControl:{
                    beta:0
                },
                boxWidth: 200,
                boxDepth: 80,
                light: {
                    main: {
                        intensity: 1.2
                    },
                    ambient: {
                        intensity: 0.3
                    }
                }
            },
            series: [{
                type: 'bar3D',
                data: data.map(function (item) {
                    return {
                        value: [item[1], item[0], item[2]]
                    }
                }),
                shading: 'color',
                label: {
                    show: false,
                    textStyle: {
                        fontSize: 16,
                        borderWidth: 1
                    }
                },
                itemStyle: {
                    opacity: 1
                },

                emphasis: {
                    label: {
                        show: false,
                        textStyle: {
                            fontSize: 20,
                            color: '#900'
                        }
                    },
                    itemStyle: {
                        color: '#900'
                    }
                }
            }]
        }
//  mapChart.setOption(option, true);
        return option;
    }

    //小数取整
    function getResult(num) {
        return parseInt(num);
    }

</script>
</html>